<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>药品查询页面</title>
  <script type="text/javascript" th:src="@{/js/jquery-3.2.1.min.js}"></script>
  <style type="text/css">
      #tab{
          width: 600px;
          height: 200px;
          text-align: center;
          /*border: 1px orange solid;*/
          margin: auto;
          /*padding-top: 10%;*/
      }
    #table{
      width: 600px;
      height: 200px;
      text-align: center;
      border: 1px palegreen solid;
    }
    #table,tr,th,td{
      height: 20px;
      font-size: 16px;
      border: 1px gold solid;
    }
  </style>
  <script type="text/javascript">
    $(function(){
        $.ajax({
          url: "/getAllDrug",
          type: "GET",
          dataType: "json",
          success: function(jsonlist){
            show(jsonlist);
          },
          error:function(jsonlist){
            alert("药品查询失败！");
          }
        });
    })
    function show(jsonlist){
      var strS =  "<table id='table'>"+"<tr><th>药品名称</th><th>药品编号</th><th>药品价格</th><th>保质期</th><th>药品作用</th><th>药品备注</th></tr>";
      var strM =  "</table>";
      var str = "";
      for (var i = 0; i < jsonlist.length; i++) {
        str += "<tr>"
                +"<td>" + jsonlist[i].drugName + "</td>"
                +"<td>" + jsonlist[i].drugNum + "</td>"
                +"<td>" + jsonlist[i].drugPrice + "</td>"
                +"<td>" + jsonlist[i].expiration + "</td>"
                +"<td>" + jsonlist[i].drugDesc + "</td>"
                +"<td>" + jsonlist[i].drugRemark + "</td>"
                +"</tr>";
      }
      $("#tab").append(strS+str+strM);
    }
    <!-- 隔行变色 -->
    $(function () {/*用于隔行变色*/
      $("tr:gt(0):odd").css("background-color","#fb80b5");
      $("tr:gt(0):even").css("background-color","#e0fb6e");
    })
  </script>
</head>
<body>
<div>
  <div id="tab">
      <h1>药品信息</h1>
      </divid>
</div>
</body>
</html>